import { getQustionListApi } from "@/api";
import { Button, Swiper } from "antd-mobile";
import React, { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import "./practice.less";
import Choose from "./components/Choose";
import Fill from "./components/Fill";

const chooseType = ["check", "one", "many"];

export default function Practice() {
  const { state } = useLocation();
  const [list, setList] = useState<Question[]>([]);

  // 如果想在react组件中使用 async + await发请求，要像下面这样写
  // const requestData = async () => {
  //   let res = await getQustionListApi(state);
  //   if (res.errCode === 0) {
  //     //
  //   }
  // };
  // useEffect(() => {
  //   requestData();
  // }, []);

  useEffect(() => {
    getQustionListApi(state).then((res) => {
      if (res.errCode === 0) {
        setList(res.data);
      }
    });
  }, []);

  return (
    <div className="practice">
      {/* item.questionType == check | one | many 证明就是选择类型 , 就渲染Choose组件 */}
      <Swiper onIndexChange={(index) => console.log(index)}>
        {list.map((item) => (
          <Swiper.Item key={item.id}>
            {chooseType.includes(item.questionType) ? (
              <Choose item={item} />
            ) : (
              <Fill item={item} />
            )}
          </Swiper.Item>
        ))}
      </Swiper>
    </div>
  );
}
